@import "../abstracts/variables.scss";
@import "../abstracts//mixins";

@mixin bodyCellContainerMixin {
  text-align: center;
  width: 100%;
  font-size: 1.3rem;
  padding: 1rem 0;
  font-family: $font-family-3;
  border-right: 0.5px solid rgba(0, 0, 0, 0.144);

  @include sm {
    margin: 0 0.5rem;
    font-size: 1.2rem;
  }
}

.targetsCollapseDataTableContainer {
  padding: 1rem 0;
  max-height: 80rem;
  overflow: scroll;
  overflow-x: hidden;

  &__headerContainer {
    width: 100%;
    @include flexbox;
    @include flex-direction(row);
    background-color: rgba(240, 239, 239, 0.842);
    padding: 1rem 0;

    & span {
      width: 100%;
      font-size: 1.3rem;
      padding: 0.5rem;
      font-family: $font-family-3;
      text-align: center;
    }
  }

  &__bodyContainer {
    border: 0.5px solid rgba(0, 0, 0, 0.075);
    padding: 1rem 0;

    &__rowContainer {
      width: 100%;
      @include flexbox;
      @include flex-direction(row);

      &__runTime {
        @include bodyCellContainerMixin;
      }

      &__time {
        @include bodyCellContainerMixin;
      }

      &__status {
        @include bodyCellContainerMixin;
      }

      &__outputfiles {
        @include bodyCellContainerMixin;

        & button {
          background-color: transparent;
          border: none;
        }
      }

      &__actionButtons {
        @include bodyCellContainerMixin;
        @include flexbox;
        @include justify-content(center);

        & button {
          padding: 1rem;
          height: 4rem;
          width: 4rem;
          background-color: rgb(243, 243, 243);
          border: 1px solid rgba(0, 0, 0, 0.089);

          & svg {
            height: 2rem;
            width: 2rem;

            @include sm {
              height: 1.5rem;
              width: 1.5rem;
            }
          }

          &:hover {
            background-color: rgb(226, 226, 226);
          }

          @include sm {
            padding: 0;
            height: 2rem;
            width: 2rem;
          }
        }

        &__reRunPlugin {
          & svg {
            color: rgba(0, 128, 0, 0.616);
          }
        }

        &__deletePlugin {
          & svg {
            color: rgba(255, 0, 0, 0.541);
          }
        }
      }
    }
  }

  &__notesAndDetailsContainer {
    &__toggleButtonAndEditor {
      margin: 1rem 0;

      & button {
        padding: 1rem;
        font-size: 1.4rem;
        background-color: rgb(243, 243, 243);
        border: 1px solid rgba(0, 0, 0, 0.089);

        &:hover {
          background-color: rgb(226, 226, 226);
        }
      }

      & p {
        font-size: 1.3rem;
        padding: 0.5rem;
        font-family: $font-family-2;
      }
    }

    &__moreDetailsContainer {
      margin: 3rem 0;
      font-size: 1.3rem;

      & h2 {
        font-family: $font-family-2;
        font-size: 1.8rem;
        padding: 1rem 0;
      }
    }

    &__linksContanier {
      & ul {
        & li {
          & a {
            display: inline-block;
            font-size: 1.4rem;
            margin: 1rem 0;
          }
        }
      }
    }
  }
}
